<template>
  <div>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <div class="modal-ctrl-body" v-show="jurisdictionListObj.isShow">
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>菜单名：{{menuName}}下的权限因子列表</p>
          </div>
          <div class="table-ctrl-body">
            <!--按钮组-->
            <div class="Btns-ctrl-body">
              <div class="search-ctrl f-l"  style="display: none">
                <form style="height: 100%;">
                  <input placeholder="搜索关键字" class="search-text">
                  <button class="search-btn btn btn-info" type="button">搜索</button>
                </form>
              </div>
              <div class="btns f-r">
                <button type="button" class="btn btn-info" @click="menuAddFn">新增</button>
                <button type="button" class="btn btn-warning" @click="menuRevampFn">修改</button>
                <button type="button" class="btn btn-danger" @click="menuDeleteFn">删除</button>
              </div>
            </div>

            <div class="table-ctrl">
              <!--表格头-->
              <div class="table-header">
                <table class="table-default">
                  <thead>
                  <tr>
                    <th v-for="ths in tHeader">
                      {{ths.value}}
                    </th>
                  </tr>
                  </thead>
                </table>
              </div>
              {{tableRow.data}}
              <!--表格中部-->
              <div class="table-overflowX" style="height: 300px;">
                <table class="table-default">
                  <tbody>
                  <tr v-for="(trs,index) in tableRow" :class="{active: index === isActive}" @click="selectJurisdiction(trs,index)">
                    <td v-for="tds in tHeader">
                        {{ [trs,tds.key] | menuNameSet }}
                      <!--{{trs[tds.key]}}-->
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>

            </div>
          </div>

          <div class="btns text-r">
            <button type="button" class="btn btn-info" @click="close">关闭</button>
          </div>
        </div>
      </div>
    </transition>

    <!--新增权限因子-->
    <MenuSelectModal
      :menuAddObj="menuAddObj"
      :menuId="JId"
      @menuAddClose="menuAddCloseFn"
      @flushCallBank="flushCallBankFn"
    ></MenuSelectModal>

    <!--修改权限因子-->
    <MenuRevampModal
      :menuRevamp="menuRevamp"
      :jurisdictionId="jurisdictionId"
      @menuRevampClose="menuRevampCloseFn"
      @flushCallBank="flushCallBankFn"
    ></MenuRevampModal>

  </div>

</template>

<script>
    import MenuSelectModal from "./MenuAddModal"
    import MenuRevampModal from "./MenuRevampModal"
    export default {
        name: "JurisdictionListModal",
        props:["jurisdictionListObj"],
        data(){
          return{
            isActive:-1,
            JId : null,
            tableRow:[],
            tHeader:[
              {"key":"name","value":"权限因子名称"},
              {"key":"privilegeFunction|displayname","value":"菜单名称"},
              {"key":"remark","value":"备注"}
            ],
            menuAddObj:{
              isShow:false
            },
            menuRevamp:{
              isShow:false
            },
            jurisdictionId:null,
            menuName:null,
            menuId:null,
          }
        },
        components:{
          MenuSelectModal,
          MenuRevampModal
        },
        watch:{
          jurisdictionListObj:{
            handler(v1){
              if( v1.isShow ){
                this.isActive = -1,
                //console.log(v1);
                this.JId = v1.id;
                this.menuName = v1.name;
                //加载权限因子列表
                this.getJListAjax();
              }
            },
            deep:true
          }
        },
        filters:{
          menuNameSet(value){
            let obj = value[0];
            let str = value[1];
            let returnValue = "";
            if( str.indexOf("|") !== -1 ){
              let strArr = str.split("|");
              returnValue = obj[strArr[0]][strArr[1]];
            }else{
              returnValue = obj[str]
            }
            return returnValue;
          }
        },
        methods:{
          //获取菜单下所有权限因子
          getJListAjax(){
            //GET /priActions/findByMenuId/{menuId}
            this.$axios.get(this.HOST+"/priActions/findByMenuId/"+this.JId)
              .then((data)=>{
                this.tableRow = data.data;
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //选择权限因子
          selectJurisdiction(obj,index){
            this.isActive = index;
            this.jurisdictionId = obj.id;
            //console.log(obj);
          },

          //新增弹窗关闭
          menuAddCloseFn(){
            this.menuAddObj.isShow = false;
          },
          //新增弹窗
          menuAddFn(){
            this.menuAddObj.isShow = true;
          },
          //修改弹窗
          menuRevampFn(){
            if( this.jurisdictionId ){
              this.menuRevamp.isShow = true;
            }else{
              this.s_alert("请选择需要修改的因子！")
              // alert("请选择需要修改的因子！")
            }
          },
          //修改弹窗关闭
          menuRevampCloseFn(){
            this.menuRevamp.isShow = false;
            this.isActive = -1;
          },
          //删除功能
          menuDeleteFn(){
            if( this.jurisdictionId ){
              let msg = confirm("是否删除该因子？");
              if( msg ){
                this.$axios["delete"](this.HOST+"/priActions/deleteAction/"+this.jurisdictionId)
                  .then((data)=>{
                    //console.log(data);
                    if( data.data.success ){
                      this.s_alert("删除成功！");
                      // alert("删除成功！");
                      this.tableRow.splice(this.isActive,1);
                      this.isActive = -1;//清除选项
                      this.jurisdictionId = null;//清除id
                    }else {
                      let errMsgArr = data.data.errorMsg.split("[");
                      this.s_alert(errMsgArr[0]);
                      // alert(errMsgArr[0]);
                    }
                  })
                  .catch((err)=>{
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的因子！");
              // alert("请选择需要删除的因子！");
            }
          },
          //刷新列表
          flushCallBankFn(){
            this.getJListAjax();
          },
          //关闭弹窗
          close(){
            this.$emit("JListModalClose");
            // 清除自身数据
            this.jurisdictionId = null;
          }
        }
    }
</script>

<style scoped>
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
